<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .cm-tooltip{
            border-radius: 4px;
            position: absolute;
            max-width: 200px;
            box-shadow: 1px 1px 12px rgba(0,0,0,0.2);
            opacity: 0.1;
            -webkit-transition: transform 0.5s,opacity 0.7s;
            -moz-transition: transform 0.2s;
            -ms-transition: transform 0.2s;
            -o-transition: transform 0.2s;
            transition: transform 0.5s,opacity 0.7s;
            overflow: hidden;
        }
        .cm-tooltip.default{
            background: #ddd;
            color: #333;
            background: -webkit-linear-gradient(top, whitesmoke 0%, #ddd 100%);
        }
        .cm-tooltip.black{
            background: #333;
            color: #ededed;
            background: -webkit-linear-gradient(top, #555 0%, #333 100%);
        }
        .cm-tooltip.top.slide,
        .cm-tooltip.bottom.slide{
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);

            opacity: 1;
        }

        .cm-tooltip.left.slide,
        .cm-tooltip.right.slide{
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -ms-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0);

            opacity: 1;
        }

        .cm-tooltip.top{
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            -o-transform: translateY(-10px);
            transform: translateY(-10px);
        }

        .cm-tooltip.left{
            -webkit-transform: translateX(-10px);
            -moz-transform: translateX(-10px);
            -ms-transform: translateX(-10px);
            -o-transform: translateX(-10px);
            transform: translateX(-10px);
        }
        .cm-tooltip.right{
            -webkit-transform: translateX(10px);
            -moz-transform: translateX(10px);
            -ms-transform: translateX(10px);
            -o-transform: translateX(10px);
            transform: translateX(10px);
        }

        .cm-tooltip.bottom{
            -webkit-transform: translateY(10px);
            -moz-transform: translateY(10px);
            -ms-transform: translateY(10px);
            -o-transform: translateY(10px);
            transform: translateY(10px);
        }

        .cm-tooltip:before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -6px;
        }
        .cm-tooltip-tile{
            margin: 0 0 5px;
            padding: 5px 10px 5px 10px;
            border-bottom: 1px solid #ddd;
        }
        .cm-tooltip-content{
            padding: 10px;
            word-break: break-all;
        }
        .cm-tooltip.default .cm-tooltip-tile{
            border-bottom: 1px solid #ddd;
        }
        .cm-tooltip.default.top:before{
            border-top-color: #ddd;
        }
        .cm-tooltip.default.bottom:before{
            border-bottom-color: whitesmoke;
            top: auto;
            bottom: 100%;
        }
        .cm-tooltip.default.left:before{
            border-left-color: #E9E9E9;
            left: 100%;
            top: 50%;
            margin-left: 0;
            margin-top: -6px;
        }
        .cm-tooltip.default.right:before{
            border-right-color: #E9E9E9;
            right: 100%;
            left: auto;
            top: 50%;
            margin-left: 0;
            margin-top: -6px;
        }


        .cm-tooltip.black .cm-tooltip-tile{
            border-bottom: 1px solid #777;
        }
        .cm-tooltip.black.top:before{
            border-top-color: #333;
        }
        .cm-tooltip.black.bottom:before{
            border-bottom-color: #555;
            top: auto;
            bottom: 100%;
        }
        .cm-tooltip.black.left:before{
            border-left-color: #444;
            left: 100%;
            top: 50%;
            margin-left: 0;
            margin-top: -6px;
        }
        .cm-tooltip.black.right:before{
            border-right-color: #444;
            right: 100%;
            left: auto;
            top: 50%;
            margin-left: 0;
            margin-top: -6px;
        }

        #theme_black{
            position: absolute;
            top: 200px;
            left: 300px;
            width: 800px;
            height: 400px;
        }
        #theme_default{
            position: absolute;
            top: 600px;
            left: 300px;
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>

<div id="theme_black">
    <div class="cm-tooltip top black" style="top: 0; left: 272px;">
        <div class="cm-tooltip-tile">Title</div>
        <div class="cm-tooltip-content">
            ToolTipToolTipToolTipToolTip
        </div>
    </div>

    <div class="cm-tooltip bottom black" style="top: 200px; left: 272px;">
        <div class="cm-tooltip-tile">Title</div>
        <div class="cm-tooltip-content">
            ToolTipToolTipToolTipToolTip2
        </div>
    </div>

    <div class="cm-tooltip left black" style="top: 106px; left: 45px">
        <div class="cm-tooltip-tile">Title</div>
        <div class="cm-tooltip-content">
            ToolTipToolTipToolTipToolTip3
        </div>
    </div>

    <div class="cm-tooltip right black" style="top: 106px; left: 500px">
        <div class="cm-tooltip-tile">Title</div>
        <div class="cm-tooltip-content">
            ToolTipToolTipToolTipToolTip4
        </div>
    </div>
</div>

<div id="theme_default">
    <div class="cm-tooltip top default" style="top: 0; left: 272px;">
        <div class="cm-tooltip-tile">Title</div>
        <div class="cm-tooltip-content">
            ToolTipToolTipToolTipToolTip
        </div>
    </div>

    <div class="cm-tooltip bottom default" style="top: 200px; left: 272px;">
        <div class="cm-tooltip-tile">Title</div>
        <div class="cm-tooltip-content">
            ToolTipToolTipToolTipToolTip2
        </div>
    </div>

    <div class="cm-tooltip left default" style="top: 106px; left: 45px">
        <div class="cm-tooltip-tile">Title</div>
        <div class="cm-tooltip-content">
            ToolTipToolTipToolTipToolTip3
        </div>
    </div>

    <div class="cm-tooltip right default" style="top: 106px; left: 500px">
        <div class="cm-tooltip-tile">Title</div>
        <div class="cm-tooltip-content">
            ToolTipToolTipToolTipToolTip4
        </div>
    </div>
</div>

<script>
    setTimeout(function(){
        var eles = document.querySelectorAll(".cm-tooltip");
        eles.forEach(function(ele){
            ele.classList.add("slide");
        });
    }, 0)

</script>
</body>
</html>